<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="请输入学校" prop="field101">
            <el-autocomplete
              :fetch-suggestions="querySearch"
              v-model="school.name"
              trigger-on-focus="true"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请输入学校" prop="field102">
            <el-autocomplete
              :fetch-suggestions="querySearch"
              v-model="school.names"
              trigger-on-focus="false"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">对比</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-table v-if="contrast"
      :data="postList"
      border
      style="width: 100%"
              :cell-style="cellStyle">
      <el-table-column
        prop="name"
        label="学校"
        width="180"
      class="one">
      </el-table-column>
      <el-table-column
        prop="location"
        label="地区"
        width="180">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="就业率"
        width="180">
      </el-table-column>
      <el-table-column
        prop="alumniassociationrankings"
        label="校友会排名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="softseccoranking"
        label="软科排名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="kaoyanlv"
        label="考研率"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { listPost, getPost, delPost, addPost, updatePost,contrast } from "@/api/system/college";
import {schoolFind} from "@/api/system/volunteer";
export default {
  components: {},
  props: [],
  data() {
    return {
      two:true,
      rate1:false,
      rate2:false,
      alumniassociationrankings1:false,
      alumniassociationrankings2:false,
      softseccoranking1:false,
      softseccoranking2:false,
      baoyanlv1:false,
      baoyanlv2:false,
      school:{},
      collegeOnes:{},
      collegeOne:{},
      collegeList:[],
      inputValue:"",
      inputValues:"",
      colleges:{},
      department:{},
      postList:[],
      college:{},
      collageOne:[],
      contrast:false,
      tableData:{},
      formData: {
        field101: undefined,
        field102: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入请输入学校',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: '请输入学校',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    cellStyle(row, column, rowIndex, columnIndex){
        if (row.columnIndex == 2) {
          if (row.rowIndex == 0) {
            if (this.rate1) {
              return "color: #ff4b18"
            }
          }
          if (row.rowIndex == 1) {
            if (this.rate2) {
              return "color: #ff4b18"
            }
          }
        }
      if (row.columnIndex==3){
        if(row.rowIndex==0){
          if (this.alumniassociationrankings1){
            return "color: #ff4b18"
          }
        }
        if (row.rowIndex==1) {
          if (this.alumniassociationrankings2) {
            return "color: #ff4b18"
          }
        }
      }
      if (row.columnIndex==4){
        if(row.rowIndex==0){
          if (this.softseccoranking1){
            return "color: #ff4b18"
          }
        }
        if (row.rowIndex==1) {
          if (this.softseccoranking2) {
            return "color: #ff4b18"
          }
        }
      }
      if (row.columnIndex==5){
        if(row.rowIndex==0){
          if (this.baoyanlv1){
            return "color: #ff4b18"
          }
        }
        if (row.rowIndex==1) {
          if (this.baoyanlv2) {
            return "color: #ff4b18"
          }
        }
      }
    },
    PercentageContrast(a,b){
      return Number(a.replace("%",""))>=Number(b.replace("%",""))
    },
    querySearch(queryString, cb){
      console.log(queryString)
      if (queryString==""){
        queryString=1
      }
      this.colleges.name=queryString
      listPost(this.colleges).then(response => {
        this.valueList=response.rows
        let s=this.valueList.map(item =>{
          let res={};
          res.value=item.name;
          return res;
        })
        cb(s)
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
      this.contrast=true
      console.log(this.school.name)
      console.log(this.school.names)
      contrast(this.school.name,this.school.names).then(response=>{
        this.postList=response.rows
        if (this.PercentageContrast(this.postList[0].rate,this.postList[1].rate)){
          this.rate1=true
          this.rate2=false
        }else {
          this.rate2=true
          this.rate1=false
        }
        if (this.postList[0].alumniassociationrankings>this.postList[1].alumniassociationrankings){
          this.alumniassociationrankings1=true
          this.alumniassociationrankings2=false
        }else {
          console.log(this.postList[1].alumniassociationrankings)
          this.alumniassociationrankings1=false
          this.alumniassociationrankings2=true
        }
        if (this.postList[0].softseccoranking>this.postList[1].softseccoranking){
          this.softseccoranking1=true
          this.softseccoranking2=false
        }else {
          this.softseccoranking1=false
          this.softseccoranking2=true
        }
        if (this.PercentageContrast(this.postList[0].baoyanlv,this.postList[1].baoyanlv)){
          this.baoyanlv1=true
          this.baoyanlv2=false
        }else {
          this.baoyanlv2=true
          this.baoyanlv1=false
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.contrast=false
      this.rate1=false
      this.rate2=false
      this.alumniassociationrankings1=false
      this.alumniassociationrankings2=false
      this.softseccoranking1=false
      this.softseccoranking2=false
      this.baoyanlv1=false
      this.baoyanlv2=false
    },
  }
}

</script>
<style>
.one{
  color: #ff4b18;
}
</style>
